@import '../bootstrap'
@import '../theme'

/** Theme */
selection-control($material)
  label
    color: $material.text.primary

  color: $material.selection-controls.active

  .icon,
  &:not(.input-group--active) .input-group__input
    color: $material.text.secondary

  &.input-group--active
    .icon
      color: inherit

  &.input-group--disabled
    .input-group__input
      color: $material.text.disabled

      .icon
        color: inherit

theme(selection-control, "input-group--selection-controls")

.input-group--selection-controls
  &.input-group--tab-focused
    .input-group--selection-controls__ripple
      &:before
        transform: translate3d(-50%, -50%, 0) scale(1)
        opacity: $ripple-animation-visible-opacity

/** Input */
.input-group.input-group--selection-controls
  display: block

  .icon
    cursor: pointer
    position: absolute
    left: 0
    user-select: none
    transition: .3s $transition.ease-in-out
    width: 100%

  .input-group__details:before, .input-group__details:after
    display: none

  .input-group__input
    color: inherit
    height: 100%
    position: relative

    // Needed for safari
    .icon
      align-self: center
      color: inherit
      width: 30px
      margin: auto

/** Label */
.input-group.input-group--selection-controls label
  pointer-events: inherit
  cursor: pointer
  pointer-events: auto
  position: relative
  top: 32px
  left: 30px
  user-select: none
  z-index: 1
  pointer-events: all

.input-group--selection-controls__ripple
  border-radius: 50%
  height: 48px
  width: 48px
  cursor: pointer
  position: absolute
  transform: translate3d(-12px, -50%, 0)
  transform-origin: center center
  top: 16px

  &:before
    content: ''
    position: absolute
    width: 36px
    height: 36px
    background: currentColor
    border-radius: 50%
    left: 50%
    top: 50%
    transform: translate3d(-50%, -50%, 0) scale(.3)
    opacity: 0
    transition: $ripple-animation-transition
    transform-origin: center center
